<script setup>
import { handelMessageToString, textHandle } from '@/utils/dialog-utils'

const props = defineProps({
  message: Object,
  isCurrentUser: Boolean,
  options: {
    type: Object,
    default: () => ({}),
  },
})

const { content, metaData } = toRefs(props.message)

const forwardMsg = metaData.value.msgForwardData

const textContent = computed(() => {
  if (!content.value) return []
  return content.value.split(/\n/)
})

const visible = ref(false)
</script>

<template>
  <div class="forward-message" :class="{ 'current-user-message': props.isCurrentUser }">
    <template v-if="content">
      <div
        class="message-box-text-color"
        v-html="textHandle(item, index, props.options)"
        v-for="(item, index) in textContent"
        :key="index"></div>
      <span class="message-edited" v-if="metaData.status.editFlag">(已编辑)</span>
    </template>
    <div class="quotation-card" @click="visible = true">
      <div class="quotation-card-title">转发的消息记录</div>
      <div
        class="message-item text-overflow-ellipsis"
        v-html="handelMessageToString(item)"
        v-for="item in forwardMsg"
        :key="item.id"></div>
      <div class="quotation-card-footer">查看{{ forwardMsg?.length }}条转发消息</div>
    </div>
    <TaskChatDialog v-model="visible" title="转发的消息记录" width="800px" append-to-body>
      <ChatContentBody
        :message-list="forwardMsg"
        disabled-footer
        disabled-operation
        style="min-height: 500px"></ChatContentBody>
    </TaskChatDialog>
  </div>
</template>

<style scoped lang="scss">
.forward-message {
  display: inline-block;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 5px;
  background-color: var(--elp-bg-color);
  border: var(--elp-border);
  .message-edited {
    font-size: 12px;
    color: #999999;
  }
  .quotation-card {
    cursor: pointer;
    width: 250px;
    background-color: var(--elp-bg-color);
    .quotation-card-title {
    }
    .message-item {
      color: var(--elp-text-color-secondary);
      font-size: 12px;
    }
    .quotation-card-footer {
      font-size: 12px;
      margin-top: 5px;
      color: var(--elp-text-color-secondary);
      border-top: 1px solid var(--elp-color-info-light-7);
    }
  }
  .file-list {
    padding: 5px 0;
  }
}
</style>
